const path = require('path');

const HtmlWebPackPlugin = require('html-webpack-plugin');

const webpack = require('webpack');

module.exports = {
    mode: "production", //  development
    /*入口*/
    entry: {
        index: './index.js'
        
    },


    /*输出到dist文件夹，输出文件名字为index.js*/
    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].[hash].js', //这里应该用chunkhash替换hash
        chunkFilename: 'src/[name].[chunkhash].js'
        // publicPath: '/assets/'
    },

    resolve: {
        alias: {
            '@src': path.join(__dirname, 'src/'),
            '@pages': path.join(__dirname, 'src/pages'),
        }
    },

    optimization: {

        splitChunks: {
            // cacheGroups: {
            //     commons: {
            //         name: 'commons',
            //         chunks: 'initial',
            //         minChunks: 1
            //     }
            // }
            chunks: 'initial', // 只对入口文件处理
            cacheGroups: {
                vendors: {
                    name: 'thrid',
                    chunks: 'initial',
                    test: /[\\/]node_modules[\\/]/, // 匹配node_modules目录下的文件
                    priority: -10 // 优先级配置项
                },
                utils: {
                    name: 'utils',
                    chunks: 'all',
                    minSize: 1,
                    minChunks: 1,
                    test: /[\\/]src[\\/]utils[\\/]/, // 匹配node_modules目录下的文件
                    priority: -11 // 优先级配置项
                },
                baseCss: {
                    name: 'base.css',
                    chunks: 'all',
                    minSize: 1,
                    minChunks: 1,
                    test: /[\\/]src[\\/]style[\\/]base.scss/, // 匹配node_modules目录下的文件
                    priority: -11 // 优先级配置项
                }
            }
        }

    },


    module: {
        rules: [{
            test: /\.(js|jsx)$/, // 匹配.js文件
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css$/,
            use: [{
                loader: "style-loader" // 将 JS 字符串生成为 style 节点
            }, {
                loader: "css-loader" // 将 JS 字符串生成为 style 节点
            }]

        },
        {
            test: /\.scss$/,
            use: [
                {
                    loader: "style-loader" // 将 JS 字符串生成为 style 节点
                },
                {
                    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                },
                {
                    loader: "sass-loader" // 将 Sass 编译成 CSS
                }
            ]
        }, {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        outputPath:'src/imgs/'
                    }
                }
            ]
        }]
    },

    devServer: {
        hot: true, // 热替换
        contentBase: path.join(__dirname, 'dist'), // server文件的根目录
        compress: true, // 开启gzip
        port: 8082, // 端口
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // HMR允许在运行时更新各种模块，而无需进行完全刷新
        new HtmlWebPackPlugin({
            template: './index.html',
            filename: path.resolve(__dirname, 'dist/index.html')
        })
    ]


};